<template>
  <div id="search_k">
    <div class="search_parent">
      <div class="zs_login">
        <img src="../../assets/image/search/search_logo.png" alt />
      </div>
      <div>
        <ul class="tab">
          <li
            @click="changeNavBar(index, item)"
            v-for="(item, index) of nav"
            :key="index"
            :class="{ border: navIdx == index }"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
      <div v-if="navSelectData.length > 0" class="sort_public">
        <div v-if="navSelectData[0].jibie">
          <!-- 级别 -->
          <span>级别：</span>
          <span
            v-for="item in navSelectData[0].jibie"
            @click="chooseINX(item.id)"
            :class="{ active: item.id == choose_agree }"
            :key="item.id"
          >{{ item.name }}</span>
        </div>
        <div v-if="navSelectData[0].catrgoryClass" class="sort">
          <!-- 类别 -->
          <span>类别：</span>
          <span
            @click="chooseINX(item.id)"
            v-for="item in navSelectData[0].catrgoryClass"
            :class="{ active: item.id == choose_agree }"
            :key="item.id"
          >{{ item.name }}</span>
        </div>
        <div v-if="navSelectData[0].yearClass" class="sort">
          <!-- 年代 -->
          <span>年代：</span>
          <span v-for="item in navSelectData[0].yearClass" :key="item.id">
            {{
            item.name
            }}
          </span>
        </div>
      </div>
      <div class="sousuo">
        <input type="text" v-model="search_content" />
        <div class="sousuo_k" @click="todetail_search2()">
          <div>
            <img src="../../assets/image/search/search_big.png" alt />
          </div>

          <span>搜索</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search_content: "",
      categoryData: [
        {
          jibie: [
            { id: 24, name: "新闻资讯" },
            { id: 25, name: "活动公告" },
            { id: 26, name: "馆务公开" },
            { id: 45, name: "文博动态" },
            { id: 57, name: "大事记" },
          ],
        },
        {
          jibie: [
            { id: 27, name: "基本陈列" },
            { id: 55, name: "临时展览" },
            { id: 56, name: "网上展厅" },
          ],
        },
        {
          catrgoryClass: [
            { id: "8a7aef0958b37e280158b38d781e0033", name: "瓷器" },
            { id: "8a7aef0958b37e280158b38e61b4003b", name: "玉器" },
            { id: "8a7aef0958b37e280158b39114d30057", name: "书画" },
            { id: "8a7aef0958b37e280158b391666e005b", name: "古籍" },
            { id: "8a7aef0958b37e280158b38ffed8004b", name: "杂项" },
            {
              id:
                "8a7aef0958b37e280158b391b34d005f" ||
                "4028c2526174389e016182f203ca002c" ||
                "8a7aef0958b37e280158b38ffed8004b" ||
                "8a7aef0958b37e280158b38fabab0047" ||
                "8a7aef0958b37e280158b390a8290053" ||
                "8a7aef0958b37e280158b38f0331003f" ||
                "8a7aef0958b37e280158b3933a730073",
              name: "其他",
            },
          ],
          // catrgoryClass: [
          //   { id: 1, name: "" },
          //   { id: 2, name: "" },
          //   { id: 3, name: "" },
          //   { id: 4, name: "" },
          //   { id: 5, name: "" }
          // ],
          // yearClass: [
          //   { id: 1, name: "近代" },
          //   { id: 2, name: "清代" },
          //   { id: 3, name: "明代" },
          //   { id: 4, name: "宋代" }
          // ]
        },
        {
          jibie: [
            { id: 33, name: "活动预告" },
            { id: 34, name: "文博课堂" },
            { id: 35, name: "文博讲座" },
            { id: 36, name: "青少年活动" },
          ],
        },
      ],
      nav: [
        { name: "全部", sort: "seachAll", category: false },
        { name: "咨讯", sort: "seachConsulting", category: true },
        { name: "展览", sort: "seachWxhibition", category: true },
        { name: "馆藏", sort: "antique", category: true },
        { name: "活动", sort: "seachActivity", category: true },
      ],
      //标识当前的Nav下标
      navIdx: 0,
      //标识根据navIdx得到对应的二级菜单
      navSelectData: [],
      name: "",
      sort: "seachAll", //种类

      //选中的级别对应的id
      choose_agree: "",
    };
  },
  mounted() {},
  methods: {
    chooseINX(index, item) {
      this.choose_agree = index;
    },

    changeNavBar(idx, item) {
      this.navIdx = idx;
      this.sort = item.sort;

      if (item.category) {
        //说明该导航下面有分类
        this.navSelectData = [];
        let list = this.categoryData[idx - 1];
        this.navSelectData.push(list);

        // console.log(this.navSelectData[0]);
        // console.log(this.navSelectData[0].jibie);
      } else {
        this.navSelectData = [];
      }
    },

    todetail_search2() {
      if (this.search_content.length == 0) return;

      this.$router
        .push({
          path: "/detail_search",
          query: {
            content: this.search_content,
            choose_agree: this.choose_agree,
            sort: this.sort,
            navIdx: this.navIdx,
            navSelectData: this.navSelectData, //下面的东西 级别类别
          },
        })
        .catch((err) => {
          err;
        });
    },
  },
};
</script>
<style scoped>
ul,
li,
p {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
  cursor: pointer;
}
.border {
  border-bottom: 3px blue solid;
}
.active {
  color: #333333;
}
.tab {
  display: flex;

  height: 40px;
  margin-bottom: 36px;
  justify-content: space-between;
}
.tab li {
  font-size: 30px;
  height: 45px;
}
.zs_login {
  margin-bottom: 50px;
  align-self: center;
}
.search_parent {
  display: flex;
  flex-direction: column;
  width: 1005px;
  margin: 160px auto 230px;
}
.cangguan > div:first-child,
.cangguan > div:nth-child(2) {
  color: #666666;
  font-size: 24px;
  margin-bottom: 23px;
}
.sort_public {
  color: #666666;
  font-size: 24px;
  margin-bottom: 23px;
}
.cangguan > div:nth-child(3) {
  color: #666666;
  font-size: 24px;
  margin-bottom: 36px;
}
.sort span,
.sort_public span {
  margin-right: 45px;
}
.sousuo input {
  outline: none;
  border: none;
  height: 75px;
  width: 1003px;
  padding-left: 20px;
  box-sizing: border-box;
  background: url("../../assets/image/search/search_K.png") no-repeat right;
}
.sousuo {
  width: 1030px;
  position: relative;
  height: 100px;
}
.sousuo_k {
  position: absolute;
  right: 0px;
  width: 170px;
  height: 75px;
  top: 0px;
  color: white;
  background: url("../../assets/image/search/search_blue.png") no-repeat right;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  cursor: pointer;
}
.sousuo_k span {
  font-size: 24px;
}
</style>
